<template>
<div class="vm-examine-waitforme-container">
  <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
    <ul>
      <router-link tag="li" :to="'/common_details/'+ item.id + '/' + item.objtype + '?type=0&btn=examinePage&objType=' + item.type" class="vm-examine-waitforme-item" v-for="(item, key) in workFlowList" :key="key">
        <div class="examine-item-l">
        </div>
        <div class="examine-item-r">
          <h6 class="item-r-h">{{ item.objtype }}</h6>
          <p class="item-r-b">{{ item.title }}</p>
          <p class="item-r-f">
            <span class="handlePerson">负责人：{{ item.person }}</span>
            <em class="awaitTime">等待时间：{{ item.created_time }}</em>
          </p>
        </div>
      </router-link>
    </ul>
    <vm-common-noData v-if="!workFlowList.length"></vm-common-noData>
  </mt-loadmore>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import { getWorkflowList } from '@/api/examine.js'
export default {
  data () {
    return {
      workFlowList: new Array(),
      allLoaded: false,
      waitForMePage: 1
    }
  },
  created () {
    this.getExamineWaitForMe(true);
  },
  mounted () {},
  methods: {
    getExamineWaitForMe (reset, loadmoreType){
      getWorkflowList(this.waitForMePage).then(res => {
        let result = res.data.data;
        if ( !result.length ) {
          this.allLoaded = true;
        } else {
          this.allLoaded = false;
        }
        if (reset) {
          this.workFlowList = result;
          this.$refs.loadmore.onTopLoaded();
        } else {
          if ( loadmoreType == 'top' ) {
            this.workFlowList = result;
            this.$refs.loadmore.onTopLoaded();
          } else {
            this.workFlowList = this.workFlowList.concat(result);
            this.$refs.loadmore.onBottomLoaded();
          }
        }
      })

    },
    // 下拉加载
    loadTop () {
      this.waitForMePage = 1;
      this.allLoaded = false;
      this.getExamineWaitForMe(true,'top');
    },
    loadBottom () {
      this.waitForMePage ++;
      this.getExamineWaitForMe(false,'bottom');
    }
  }

}
</script>

<style scoped lang="scss">
.vm-examine-waitforme-container {
  width: 100%;
  height: calc( 100% - 80px );
  background-color: #fff;
  overflow: auto;
  ul {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    height: 100%;
    li.vm-examine-waitforme-item {
      display: flex;
      border-bottom: 1px solid #eeeeee; /* no */
      padding-left: 20px;
      padding-top: 30px;
      div.examine-item-l {
        display: flex;
        justify-content: flex-start;
        width: 100px;
        background: url("../../../static/images/vm-common-ltem-list.png") no-repeat;
        background-size: 80px 80px;
      }
      div.examine-item-r {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: left;
        .item-r-h{
          height: 50px;
          font-size: 30px;
          color: #6c749c ;
        }
        .item-r-b{
          font-size: 26px;
          color: #333;
        }
        .item-r-f{
          display: flex;
          justify-content: space-between;
          padding-right: 35px;
          margin-top: 30px;
          height: 45px;
          font-size: 24px;
          .handlePerson {
            color: #999;
          }
          .awaitTime {
            color: #ff9542;
          }
        }

      }
    }
  }
}
</style>
